<template>
	<view class="w-100 prefecture-view">
		<view class="prefecture-heard space-between" v-if="heardShow">
			<view class="u-f-40 font-weight-550">{{title}}</view>
			<view class="row" @click="moreVideo" v-if="showMore">
				<view class="w-s-color-9 u-f-24 u-m-r-8">更多</view>
				<u-icon name="arrow-right" color="#999" size="28"></u-icon>
			</view>
		</view>
		<view class="space-between flex-wrap w-100">
			<view class="video-item u-bdr-12 u-m-b-16" v-for="item in list" :key="item.courseId" @click="seVideo(item)">
				<view class="position-relative">
					<u-image width="220rpx" height="294rpx" :src="item.titleImg"></u-image>
					<view class="position-absolute right-0 bottom-0 num-view u-f-24 w-s-color-f">
						共{{item.courseDetailsCount?item.courseDetailsCount:0}}集</view>
				</view>
				<view class="item-text">
					<view class="text-ellipsis one-text-ellipsis u-f-28 u-m-b-12">{{item.title}}</view>
					<view class="row">
						<view class="theme-bdr-box u-bdr-4 text-primary u-f-20 u-m-r-4" v-if="item.courseLabel">
							{{item.courseLabel.split(',')[0]}}</view>
						<view class="u-flex-1 text-ellipsis one-text-ellipsis u-f-24 w-s-color-67">{{item.courseLabel}}</view>
					</view>
				</view>
			</view>
			<view class="video-no"></view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: ''
			},
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			sort:{
				type:[Number,String],
				default:""
			},
			showMore:{
				type:Boolean,
				default:true
			},
			heardShow:{
				type:Boolean,
				default:true
			}
		},
		options: {
			styleIsolation: "shared"
		},
		methods:{
			// 查看更多
			moreVideo() {
				this.$navTo(`/pages/index/course/courseList?title=${this.title}&sort=${this.sort}`)
			},
			/* 查看视频 */
			seVideo(item){
				this.$navTo(`/me/detail/detail?id=${item.courseId}&courseDetailsId=${item.courseDetailsId}&tt_album_id=${item.dyCourseId}&tt_episode_id=${item.dyEpisodeId}`)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.prefecture-view {
		.prefecture-heard {
			height: 104rpx;
		}

		.video-item {
			width: 220rpx;
			background: #F8F8F8;

			/deep/.u-image__image {
				border-radius: 12rpx 12rpx 0 0 !important;
			}

			.num-view {
				height: 32rpx;
				background: rgba(51, 51, 51, 0.34);
				border-radius: 6rpx 0rpx 6rpx 0rpx;
				line-height: 32rpx;
				padding: 0 16rpx;
			}

			.item-text {
				height: 118rpx;
				padding: 12rpx 0 0 12rpx;

				.theme-bdr-box {
					padding: 2rpx 10rpx;
				}
			}
		}

		.video-no {
			width: 220rpx;
		}
	}
</style>